<template>
  <div class="formpage">
    <div class="title">对公信息变更</div>
    <div style="height:60px;line-height: 30px;text-align:left;padding:0 10px;background: #eee;font-size: 14px">
      <span>南京市中心大酒店有限公司</span><br>
      <span>公司基本信息变更</span></div>
    <ul>
      <li>
        <div style="height:80px">客户名称</div>
        <div>
          <div>南京市中心大酒店有限公司</div>
          <div class="checkboxMenu">
            <div><input type="checkbox" name="">&nbsp;同步印鉴变更</div>
            <div><input type="checkbox" name="">&nbsp;账户名称变更</div>
          </div>
        </div>
      </li>
      <li>
        <div>证明文件类型</div>
        <div>*****************</div>
      </li>
      <li>
        <div>证明文件号</div>
        <div>*****************</div>
      </li>
      <li>
        <div>单位电话</div>
        <div>*****************</div>
      </li>
      <li>
        <div>邮政编码</div>
        <div>*****************</div>
      </li>
      <li>
        <div style="height:80px">法定代表人/单位负责人姓名</div>
        <div style="flex:1">
          <div>xxxxxxxxxxx</div>
          <div class="checkboxMenu">
            <div><input type="checkbox" name="">&nbsp;同步印鉴变更</div>
          </div>
        </div>
      </li>
      <li>
        <div>证件类型</div>
        <div>*****************</div>
      </li>
      <li>
        <div>证件号码</div>
        <div>*****************</div>
      </li>
      <li>
        <div>证件到期日</div>
        <div>*****************</div>
      </li>
      <li>
        <div>手机</div>
        <div>*****************</div>
      </li>
      <li>
        <div>固定电话</div>
        <div>*****************</div>
      </li>
      <li>
        <div>注册地址</div>
        <div>*****************</div>
      </li>
      <li style="border:0;">
        <div>注册资金金额</div>
        <div>*****************</div>
      </li>
    </ul>
    <div class="jyfw">
      <span>经营范围</span>
      <input type="checkbox" name="">&nbsp;一键获取
      <span></span>
    </div>
    <textarea rows="5">

    </textarea>
    <div style="width:100%;padding:0 2%;font-size: 14px;color:#999;margin-bottom: 10px">
      *注：需要变更工商三证合一的客户请选择证明文件类型、
      文件号、起止日期的字段进行变更
    </div>
    <button class="openMore" @click="openMore" v-if="!showmore">展开</button>
    <div v-if="showmore">
      <div class="ultip">上级单位信息或主管单位信息</div>
      <ul>
        <li>
          <div>基本户核准号/编号</div>
          <div style="flex:1">*****************</div>
        </li>
        <li>
          <div>上级单位或主管单位名称</div>
          <div style="flex:1">*****************</div>
        </li>
        <li>
          <div>法定代表人/单位负责人</div>
          <div style="flex:1">*****************</div>
        </li>
        <li>
          <div>证件类型</div>
          <div style="flex:1">*****************</div>
        </li>
        <li>
          <div>证件号码</div>
          <div style="flex:1">*****************</div>
        </li>
      </ul>
      <div class="ultip">
        账户信息变更&nbsp;&nbsp;&nbsp;账号0151270000000567
      </div>
      <ul>
        <li class="accountli">
          <div>
            <div>账户基本信息</div>
            <div>账户名称</div>
            <div></div>
          </div>
          <div style=" ">
            <div>xxxxxxxxxxx</div>
            <div>xxxxxxxxxxx</div>
            <div class="checkboxMenu">
              <div><input type="checkbox" name="">&nbsp;同客户名称</div>
            </div>
          </div>
        </li>
        <li class="accountli editdel">
          <div style="flex:2">
            <div>账户经办人信息变更</div>
            <div class="ren"><span>王xx</span><span>经办人</span></div>
            <div>15251859658 / 025-89563256</div>
            <div>身份证 320101185696526325</div>
          </div>
          <div style="flex:1">
            <div style="width:100%;justify-content: space-around">
              <div class="mui-icon mui-icon-compose" @click="editContacts"></div>
              <div class="mui-icon mui-icon-trash" @click="delContacts"></div>
            </div>
          </div>
        </li>
        <li class="accountli editdel">
          <div style="flex:2">
            <div class="ren"><span>王xx</span><span>大额联系人</span></div>
            <div>15251859658 / 025-89563256</div>
            <div>身份证 320101185696526325</div>
          </div>
          <div style="flex:1">
            <div style="width:100%;justify-content: space-around">
              <div class="mui-icon mui-icon-compose" @click="editContacts"></div>
              <div class="mui-icon mui-icon-trash" @click="delContacts"></div>
            </div>
          </div>
        </li>
      </ul>
      <div style="height:40px;line-height: 40px" @click="editContacts">
        <div class="mui-icon mui-icon-plusempty"></div>
        新增
      </div>
      <div class="ultip">上级单位信息或主管单位信息</div>
      <ul>
        <li>
          <div><input type="checkbox">更换公章</div>
        </li>
        <li>
          <div><input type="checkbox">更换财务章</div>
        </li>
        <li>
          <div><input type="checkbox">更换法人章</div>
        </li>
        <li>
          <div><input type="checkbox">更换其他预留印鉴人章</div>
        </li>
        <li>
          <div>新印鉴启用时间</div>
          <div style="flex:1;text-align: left"><input
            style="margin:0;width:150px;height:30px;font-size: 14px;padding:0;text-align: center" placeholder="请选择时间"
            readonly="readonlys" type="text" @click="selectTimeOn" v-model="showtime"></div>
        </li>
      </ul>
      <div style="height:40px;line-height: 40px" @click="addImage">
        <div class="mui-icon mui-icon-plusempty"></div>
        上传影像
      </div>
      <button id="nextStep2" @click="nextStep">
        提交
      </button>
    </div>
  </div>
</template>

<script>
  import "../../assets/css/mui.picker.min.css";

  import('../../assets/js/mui.picker.min');
  import moment from 'moment';

  export default {
    name: "formpage",
    data() {
      return {
        showmore: false,
        showtime: moment(new Date()).format('YYYY-MM-DD hh:mm')
      }
    },
    methods: {
      openMore() {
        this.showmore = true;
      },
      selectTimeOn() {
        let that = this
        let picker = new mui.DtPicker({
          type: "datetime", //设置日历初始视图模式
          beginYear: new Date().getFullYear(), //设置开始年
          endYear: new Date().getFullYear() + 1, //设置结束年
          labels: ['年', '月', '日', '时', '分'], //设置默认标签区域提示语
        })
        picker.setSelectedValue(that.showtime)
        picker.show(function (rs) {
          that.showtime = rs.text
        })
      },
      editContacts() {
        this.$router.push({path: "/contacts", query: {}})
      },
      delContacts() {
        let that = this;
        mui.confirm('你确定删除吗？', '提示', ["取消", "确认"], function (e) {
          if (e.index == 1) {

          }
        })
      },
      addImage() {
        this.$router.push({path: "/addimage", query: {}})
      },
      nextStep() {
        this.$router.push({path: "/subResult", query: {}})
      }
    }
  }
</script>

<style scoped lang="less">
  ul {
    padding: 0 2%;
    margin: 0;
    list-style-type: none;
    li {
      display: flex;
      flex: 3;
      align-items: center;
      border-bottom: 1px solid #ddd;
      > div:first-child {
        display: flex;
        flex: 1;
        text-align: left;
        font-size: 14px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        height: 50px;
        align-items: center;
      }
      > div:last-child {
        flex: 2;
        font-size: 13px;
        > div:first-child {
          align-items: center;
          font-size: 15px;
          color: #333;
          justify-content: center;
        }
      }
      .checkboxMenu {
        display: flex;
        align-items: center;
        justify-content: space-around;
        div {
          display: flex;
          align-items: center;
        }
      }
    }

    .accountli {
      height: 80px;
      font-size: 13px;
      > div {
        height: 100% !important;
      }
      > div:first-child {
        flex-direction: column;
        align-items: start;
        div {
          display: flex;
          align-items: center;
          flex: 1;
        }
        div:first-child {
          font-size: 15px;
        }
        .ren {
          width: 100% !important;
        }
        span:last-child {
          display: flex;
          padding: 1px 5px;
          border-radius: 5px;
          background: #999;
          margin-left: 30px;
          color: #eee;
        }
      }
      > div:last-child {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        div {
          display: flex;
          align-items: center;
          flex: 1;
        }
      }
    }

    .editdel {
      height: 100px;
    }
  }

  .jyfw {
    height: 30px;
    line-height: 30px;
    text-align: left;
    padding: 0 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    > span {
      flex: 1;
    }
  }

  textarea {
    width: 96%;
    border: 1px solid #eee;
    color: #666;
    font-size: 14px;
    margin: 0;
  }

  .openMore {
    font-size: 16px;
    margin: 20px 0 20px 0;
    width: 40px;
    border: 0;
    color: blue;
    padding: 0;
  }

  .ultip {
    width: 100%;
    background: #eee;
    height: 40px;
    padding: 0 2%;
    line-height: 40px;
    font-size: 15px;
    color: #000;
    text-align: left;
  }

  #nextStep2 {
    width: 50%;
    height: 40px;
    background: dodgerblue;
    color: white;
    border: 0;
    border-radius: 40px;
    margin: 30px 0 50px 0;
  }
</style>
